React Virtual DOM

为什么说操作DOM慢

DOM对象本身是一个js对象，其实操作这个对象并不慢，慢的是操作这个对象后，会触发一些浏览器行为，比如布局(layout)和绘制(paint)。

浏览器渲染主要流程

浏览器如何工作的

浏览器对HTMl的渲染分为5个步骤：

1. 处理HTML标记并构建出DOM树
2. 处理CSS标记并构建CSSOM树
3. 将两者关联生成Render Tree
4. Layout根据Render Tree来布局，计算每个节点的几何信息
5. 根据计算好的信息绘制整个页面

其中，layout是最耗时的步骤。因此需要最小化layout的次数

什么情况下浏览器会进行layout

layout用来计算文档中元素的位置和大小，在HTML第一次被加载的时候，会有一次layout，称为reflow/如下操作也会触发reflow

• 插入、删除、移动、更新DOM
• 改变页面内容，如输入框的文本
• 改变CSS样式
• 改变窗口大小

Vitual DOM更快么

Virtual DOM并不比直接操作DOM快，只不过使用Vitual DOM可以减少不必要的DOM更新，从而减少比较耗时的layout和paint工作。